const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const progress = document.querySelector('#progress')
const circles = document.querySelectorAll('.circle')

let current = 1
next.addEventListener('click', () => {
  current++
  if (current > circles.length) {
    current = circles.length

  }
  render()
})

prev.addEventListener('click', () => {
  current--
  if (current < 1) {
    current = 1
  }
  render()
})
function render() {
  circles.forEach((circle, index) => {
    if (index < current) {
      circle.classList.add('active')
    } else {
      circle.classList.remove('active')
    }
  })
  const actives = document.querySelectorAll('.active')
  progress.style.width = `${(actives.length - 1) / (circles.length - 1) * 100}%`
  if (current === 1) {
    prev.disabled = true
  } else if (current === circles.length) {
    next.disabled = true
  } else {
    prev.disabled = false
    next.disabled = false
  }
}